<template>
	<view>
		<u-navbar 
		:is-back="uNavbar.isback" 
		:height="uNavbar.height" 
		:border-bottom="uNavbar.borderBottom">
			<view class="slot-wrap">
				消息通知
			</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<view slot="right">
				<u-icon name="trash" size="48" :custom-style="{'margin-right':'40rpx'}"></u-icon>
			</view>
			<!-- #endif -->
		</u-navbar>

		<!-- 内容区  -->
		<view>
			<view class="content">
				<view class="content_back">
					<u-badge type="error" :count="count" :offset="offset"></u-badge>
					<u-icon name="tongzhi" custom-prefix="icon" size="36"></u-icon>
					<text class="text">通知</text>
				</view>
				<view class="content_back">
					<u-badge type="error" :count="count" :offset="offset"></u-badge>
					<u-icon name="xihuan1" custom-prefix="icon" size="36"></u-icon>
					<text class="text">粉丝</text>
				</view>
				<view class="content_back">
					<u-badge type="error" :count="count" :offset="offset"></u-badge>
					<u-icon name="wodefensi" custom-prefix="icon" size="36"></u-icon>
					<text class="text">喜欢</text>
				</view>
			</view>
			
			<view class="directMessages">
				<text>全部私信</text>
				<!-- #ifdef MP -->
				<u-icon name="trash" size="34"></u-icon>
				<!-- #endif -->
			</view>
			
			<block v-for="(item, index) in list" :key="item.id">
				<view style="margin-bottom: 40rpx;">
					<u-swipe-action
						:show="item.show" 
						:index="index" 
						:vibrate-short="true" 
						:btn-width="120"
						@click="click" @open="open"
						:options="options"
					>
						<view class="messageLogging">
							<view class="messageImg">
								<u-badge type="error" :is-dot="true" :offset="[5,5]"></u-badge>
								<image :src="item.images"></image>
							</view>
							<view class="messageName">
								<view class="messageName_font">{{ item.name }}</view>
								<view class="messageName_text u-line-1">{{ item.title }}</view>
							</view>
							<view class="messageTime">{{ item.tiem }}</view>
						</view>
					</u-swipe-action>
				</view>
			</block>
		</view>
		
		<u-tabbar :list="tabBarList" iconSize="48"></u-tabbar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			uNavbar: {
				// #ifdef APP-PLUS | H5
				height: 60,
				// #endif
				isback: false,
				borderBottom: false,
			},
			count: 999,
			offset: [-5, 5],
			list: [
				{
					id: 1,
					name: '测试',
					title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
					images: 'https://cdn.uviewui.com/uview/common/logo.png',
					show: false,
					tiem: '一分钟'
				},
				{
					id: 2,
					name: '测试2',
					title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
					images: 'https://cdn.uviewui.com/uview/common/logo.png',
					show: false,
					tiem: '一分钟'
				},
				{
					id: 3,
					name: '测试3',
					title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
					images: 'https://cdn.uviewui.com/uview/common/logo.png',
					show: false,
					tiem: '04-06',
				}
			],
			options: [ // 滑动配置
				{
					text: '置顶',
					style: {
						backgroundColor: '#007aff',
						fontSize: '28rpx'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						fontSize: '28rpx'
					}
				}
			]
		};
	},
	methods: {
		click(index, index1) {
			if(index1 == 1) {
				this.list.splice(index, 1);
				this.$u.toast(`删除了第${index}个cell`);
			} else {
				this.list[index].show = false;
				this.$u.toast(`置顶成功`);
			}
		},
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.list[index].show = true;
			this.list.map((val, idx) => {
				if(index != idx) this.list[idx].show = false;
			})
		},
	},
	computed: {
		...mapGetters([
			'tabBarList',
		])
	},
};
</script>

<style lang="scss" scoped>
	// 导航栏样式
	.slot-wrap {
		font-weight: 700;
		font-size: 48rpx;
		color: #101010;
		line-height: 60rpx;
		text-align: left;
		padding-left: 40rpx;
	}
	
	// 通知 粉丝 喜欢
	.content {
		width: 100%;
		padding: 20rpx 40rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
		
		.content_back {
			width: 176rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			border-radius: 100rpx;
			background-color: #101010;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.text {
				margin-left: 18rpx;
				font-weight: 700;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	
	// 全部私信
	.directMessages {
		display: flex;
		padding: 0 40rpx;
		margin: 40rpx 0;
		font-size: 30rpx;
		font-weight: 700;
		color:#101010;
		justify-content: space-between;
	}
	
	.messageon {
		background-color: #f4f4f4;
	}
	
	.messageLogging {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 100rpx;
		
		.messageImg {
			position: relative;
			width: 100rpx;
	
			image{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				border: 6rpx solid #101010;
			}
		}
	
		.messageName {
			flex: 1;
			margin-left: 20rpx;
			
			.messageName_font {
				margin-top: 12rpx;
				font-weight: 700;
				font-size: 30rpx;
				color: #101010;
				line-height: 42rpx;
			}
			
			.messageName_text {
				width: 430rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #d5d5d5;
				line-height: 36rpx;
			}
		}
	
		.messageTime {
			margin-top: 12rpx;
			width: 120rpx;
			text-align: right;
			font-weight: 400;
			font-size: 26rpx;
			color: #d5d5d5;
			line-height: 36rpx;
		}
	
		.removeq {
			margin-left: -5%;
			width: 160rpx;
			height: 100%;
			color: #ffffff;
			position: absolute;
			top: 0;
			right: -160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			background-color: #2B85E4;
		}
		.edit {
			width: 160rpx;
			height: 100%;
			background-color: red;
			color: white;
			position: absolute;
			top: 0;
			right: -320rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

</style>
